<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				margin: auto;
				border: 1px solid;
				width: 1300px;
				height: 500px;
			}
		</style>
	</head>

	<body>
		<div>
			<canvas id="myCanvas" width="1300" height="500"></canvas>
		</div>
		<script type="text/javascript">
		
			var canvas = document.getElementById("myCanvas");
			var ctx = canvas.getContext("2d");
			//自行车
			var rot = 0;
			var jiaodu = 5;
			var R = 100;
			var arcX = 1500;
			var arcY = 400;


			
			var huchang = jiaodu * Math.PI * R / 180;
			var fx1 = 5;//增加的角度
			var arcXi = 1800;
			var arcYi = 400;
			var ro = 0;

			var huchang2 = fx1 * Math.PI * 100 / 180;

			setInterval(function() {

				var y2 = Math.sin(rot / 180 * Math.PI) * 0.5 * R;
				var x2 = Math.cos(rot / 180 * Math.PI) * 0.5 * R;

							ctx.fillStyle = "bisque";

				ctx.fillRect(0, 0, 1300, 500);
				ctx.beginPath();
				ctx.arc(arcX, arcY, R, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI);
				ctx.fillStyle = "white";
				ctx.fill();
				ctx.beginPath();
				ctx.arc(arcX, arcY, R, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI, true);
				ctx.fillStyle = "black";
				ctx.fill();

				ctx.beginPath();
				ctx.arc(arcX + x2, arcY + y2, 0.5 * R, 0, 2 * Math.PI);
				ctx.fillStyle = "black";
				ctx.fill();

				ctx.beginPath();
				ctx.arc(arcX - x2, arcY - y2, 0.5 * R, 0, 2 * Math.PI);
				ctx.fillStyle = "white";
				ctx.fill();
				ctx.beginPath();
				ctx.arc(arcX - x2, arcY - y2, 0.1 * R, 0, 2 * Math.PI);
				ctx.fillStyle = "bisque";
				ctx.fill();
				ctx.beginPath();
				ctx.arc(arcX + x2, arcY + y2, 0.1 * R, 0, 2 * Math.PI);
				ctx.fillStyle = "bisque";
				ctx.fill();

				ctx.beginPath();
				ctx.lineWidth = 3;
				ctx.arc(arcX + 150, arcY, 0.2 * R, 0, 2 * Math.PI);
				ctx.fillStyle = "white";
				ctx.closePath();
				ctx.stroke();
				
				ctx.beginPath();
				ctx.lineWidth = 3;
				ctx.fillStyle="white";
				ctx.moveTo(arcX,400);
				ctx.lineTo(arcX +75,250);
				ctx.lineTo(arcX + 150, 400);
				ctx.stroke();
				
				
				ctx.beginPath();
				ctx.lineWidth = 3;
				ctx.fillStyle="white";
				ctx.lineTo(arcX +75,250);
				ctx.lineTo(arcX + 70, 210);
				ctx.stroke();
				
				ctx.beginPath();
				ctx.lineWidth = 3;
				ctx.fillStyle="white";
				ctx.lineTo(arcX + 70, 210);
				ctx.lineTo(arcX + 46, 210);
				ctx.stroke();
				
				
				ctx.beginPath();
				ctx.lineWidth = 1;
				ctx.fillStyle="white";
				ctx.lineTo(arcX +75,250);
			    ctx.lineTo(arcXi-75, 250);
				ctx.stroke();
				
				ctx.beginPath();
				ctx.lineWidth = 3;
				ctx.fillStyle="white";
				ctx.lineTo(arcX +75,250);
			    ctx.lineTo(arcXi-75, 250);
				ctx.stroke();
				//脚蹬子
				ctx.beginPath();
				ctx.lineWidth = 1;
				ctx.fillStyle="white";
				
				ctx.lineTo(arcX + 150,arcY+30);
			    ctx.lineTo(arcX + 150,arcY-35);
			    
				ctx.stroke();
				
				ctx.beginPath();
				ctx.lineWidth = 1;
				ctx.fillStyle="white";
				ctx.lineTo(arcX + 145,arcY+30);
			    ctx.lineTo(arcX + 155,arcY+30);
				ctx.stroke();
				
				ctx.beginPath();
				ctx.lineWidth = 1;
				ctx.fillStyle="white";
				ctx.lineTo(arcX + 145,arcY-35);
			    ctx.lineTo(arcX + 155,arcY-35);
				ctx.stroke();
               //车把
               
                ctx.beginPath();
				ctx.lineWidth = 3;
				ctx.arc(arcX + 65, 220, 0.2 * R, 2/6* Math.PI, 7/6* Math.PI);
				ctx.fillStyle = "white";
				ctx.stroke();

				rot =  rot-jiaodu;
				arcX = arcX - huchang;
				
				
				
				if( arcX < -400) {
					arcX=1500;
				}




				var y1 = Math.sin(ro / 180 * Math.PI) * 50;
				var x1 = Math.cos(ro / 180 * Math.PI) * 50;
				//								var fx1 = 5;
				//								var R=100;
				ctx.beginPath();
				ctx.arc(arcXi, arcYi, 100, (ro / 180) * Math.PI, (1 + ro / 180) * Math.PI);
				ctx.fillStyle = "white";
				ctx.fill();
				ctx.beginPath();
				ctx.arc(arcXi, arcYi, 100, (ro / 180) * Math.PI, (1 + ro / 180) * Math.PI, true);
				ctx.fillStyle = "black";
				ctx.fill();

				ctx.beginPath();
				ctx.arc(arcXi + x1, arcYi + y1, 50, 0, 2 * Math.PI);
				ctx.fillStyle = "black";
				ctx.fill();

				ctx.beginPath();
				ctx.arc(arcXi - x1, arcYi - y1, 50, 0, 2 * Math.PI);
				ctx.fillStyle = "white";
				ctx.fill();
				ctx.beginPath();
				ctx.arc(arcXi - x1, arcYi - y1, 10, 0, 2 * Math.PI);
				ctx.fillStyle = "bisque";
				ctx.fill();
				ctx.beginPath();
				ctx.arc(arcXi + x1, arcYi + y1, 10, 0, 2 * Math.PI);
				ctx.fillStyle = "bisque";
				ctx.fill();
				
				ctx.beginPath();
				ctx.lineWidth = 3;
				ctx.fillStyle="white";
				ctx.moveTo(arcXi,400);
				ctx.lineTo(arcXi - 150,400);
				ctx.lineTo(arcXi-75, 250);
				ctx.lineTo(arcXi,400);
				ctx.closePath();
				ctx.stroke();
				
				ctx.beginPath();
				ctx.lineWidth = 3;
				ctx.fillStyle="white";
				ctx.lineTo(arcXi-75, 250);
				ctx.lineTo(arcXi-60,230);
				ctx.closePath();
				ctx.stroke();
				
				ctx.beginPath();
				ctx.lineWidth = 3;
				ctx.fillStyle="white";
				ctx.lineTo(arcXi-45, 230);
				ctx.lineTo(arcXi-75,230);
				ctx.closePath();
				ctx.stroke();
				
				
				arcXi =  arcXi-huchang2 ;
				ro = ro - fx1;
				
			if( arcXi < -100) {
					arcXi=1800;
				}

			}, 50)
			
		</script>

	</body>

</html>